<template>
  <div class="homeListShop">
    <div class="homeListShop-title">
        <span></span>
        <p>小编精选，全场特惠 (ง •̀_•́)ง</p>
        <span></span>
      </div>
    <div class="listShop">
      <van-list
        v-model="loading"
        :finished="isEnd"
        finished-text="没有更多了"
        @load="getListData "
      >
        <van-cell
          v-for="list in lists"
          :key="`list-${list.id}`"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <VueCateList
              :id="list.id"
              :image="list.image"
              :title="list.title"
              :type="list.type"
              :saleNum="list.saleNum"
              :price="list.price"
              :couponValue="list.couponValue"
              :url="list.url"
            >
            </VueCateList>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import VueCateList from '@/components/VueCateList'
export default {
  data () {
    return {
      start: 0,
      isEnd: false,
      loading: false,
      lists: []
    }
  },
  components: {
    VueCateList
  },
  methods: {
    getListData () {
      this.$http.getLists(1, this.start)
        .then(resp => {
          // console.log(resp)
          const { list, isEnd, start } = resp.items
          this.lists = this.lists.concat(list)
          this.isEnd = isEnd
          this.start = start
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.homeListShop {
  .homeListShop-title {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsla(21,8%,49%,.7);
    font-size: 13px;
    span {
      width: 40px;
      height: 1px;
      background-color: #fdde4a;
      margin: 0 20px;
    }
    p {
      position: relative;
    }
    p::before {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      background: #fdde4a;
      left: -17px;
      top: 0;
      bottom: 0;
      margin: auto 0;
      transform: rotate(45deg)
    }
    p::after {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      background: #fdde4a;
      right: -17px;
      top: 0;
      bottom: 0;
      margin: auto 0;
      transform: rotate(45deg)
    }
  }
  .van-list {
    display: flex;
    flex-wrap: wrap;
    .van-cell {
      width: 46%;
      margin: 2%;
      padding: 2%;
      background-color: white;
      box-sizing: border-box;
    }
  }
  .van-cell__title {
    width: 100%;
  }
}
</style>
